/*
 * 商城数据大盘
 * @Author: along
 * @Date: 2020-03-30
 */
<template>
    <div class="container userDataAnalysis">
        <shopHead
            :title="user.user_count"
            v-if="!authResult.auth_user_count && !authResult.auth_user_school && !authResult.auth_user_visitor ? false : true"
        />
        <!-- 总用户大盘/注册数据 -->
        <!--2021/06/17隐藏-->
        <!--<data-view
            :user_filter="user_filter"
            :date-list="dateList"
            :number="1"
            :type="false"
            :title="user.user_title"
            :user-count="userCount"
            :is-filter="false"
            @change="fnChangeDate(1)"
            v-if="authResult.auth_user_count"
        />-->
        <div
            class="container-charts"
            style="margin-top:10px"
        >
            <div
                class="student-home"
                v-if="authResult.auth_user_count"
                style="padding-bottom: 20px"
            >
                <div class="main-content">
                    <p class="main-content-title">学校所在城市</p>
                </div>
                <div
                    class="student"
                    style="max-height: 350px"
                >
                    <el-table
                        :data="userCount.city_count_list"
                        max-height="350px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="name"
                            label="城市名称"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="value"
                            label="城市人数"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            label="占比"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.value !== 0 && userCount.countNum !== 0">
                                    {{ (scope.row.value / userCount.countNum * 100).toFixed(2) }}%
                                </span>
                                <span v-else>0</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 总用户大盘/性别占比/学校所在城市/手机操作系统占比 -->
        <div
            class="container-charts"
            v-if="authResult.auth_user_count"
        >
            <data-charts
                :title="data_charts_title.sex_title"
                :user-count="userCount.sex_count_list"
                :id=" 'sex' "
                :number="2"
                :style="{margin: '0 10px 0 0px'}"
            />
            <!-- <data-charts
                :title="data_charts_title.city_title"
                :user-count="userCount.city_count_list"
                :style="{margin: '0 10px 0 10px'}"
                :id=" 'city' "
                :number="3"
            /> -->
            <data-charts
                :title="data_charts_title.phone_title"
                :user-count="userCount.os_count_list"
                :id=" 'phone' "
                :number="2"
                :style="{margin: '0 10px 0 0px'}"
            />
            <data-venn
                :title="data_charts_title.register_title"
                :data="userCount.social_stat"
            />
        </div>
        <!-- 用户所在学校/应用版本人数 -->
        <div
            class="container-charts"
            style="margin-top:10px"
        >
            <div
                class="student-home student-home-list"
                v-if="authResult.auth_user_school"
                style="padding-bottom: 20px"
            >
                <div class="main-content">
                    <p class="main-content-title">用户所在的学校</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="school_filter.date"
                            type="datetime"
                            placeholder="选择日期时间"
                            :disabled="school_filter.date_slot !== ''"
                            @change="fnChangeDate(2)"
                            size="small"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div
                    class="student"
                    style="max-height: 350px"
                >
                    <el-table
                        :data="schoolNumber"
                        max-height="350px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="school_name"
                            label="学校名称"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="count"
                            label="人数"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="percent"
                            label="占比"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.percent }}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div
                class="student-home student-home-list"
                v-if="authResult.auth_user_visitor"
                style="padding-bottom: 20px"
            >
                <div class="main-content">
                    <p class="main-content-title">应用版本人数</p>
                </div>
                <div class="main-seat" />
                <div
                    class="student"
                    style="max-height: 350px"
                >
                    <el-table
                        :data="visitorApp"
                        max-height="350px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="app_version"
                            label="版本名称"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="count"
                            label="人数"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="percent"
                            label="占比"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.percent }}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 新增用户大盘 -->
        <shopHead
            :title="user.new_user_count"
            v-if="!authResult.auth_user_add_count && !authResult.auth_user_add_school ? false : true"
        />
        <!-- 新增用户大盘 新增用户数 -->
        <data-view
            :user_filter="newUser_filter"
            :date-list="dateList"
            :number="1"
            :type="true"
            :title="user.new_user_title"
            :user-count="newUserCount"
            :is-filter="true"
            @change="fnFilterData(3)"
            v-if="authResult.auth_user_add_count"
        />
        <div
            class="container-charts"
            v-if="authResult.auth_user_add_count"
        >
            <data-charts
                :title="data_charts_title.sex_title"
                :user-count="newUserCount.sex_count_list"
                :id=" 'new_sex' "
                :number="2"
            />
            <data-charts
                :title="data_charts_title.city_title"
                :user-count="newUserCount.city_count_list"
                :style="{margin: '0 0 0 10px'}"
                :id=" 'new_city' "
                :number="2"
            />
        </div>
        <!-- 新增用户学校 -->
        <div
            class="container-charts"
            style="margin-top:10px"
            v-if="authResult.auth_user_add_school"
        >
            <div
                class="student-home"
                v-if="true"
                style="padding-bottom: 20px"
            >
                <div class="main-content">
                    <p class="main-content-title">新增用户的学校</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="newSchool_filter.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(1)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div
                    class="student"
                    style="max-height: 350px"
                >
                    <el-table
                        :data="newUserSchool"
                        max-height="300px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="school_name"
                            label="学校名称"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="count"
                            label="人数"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="percent"
                            label="占比"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.percent }}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 访问用户大盘 -->
        <shopHead
            :title="user.visit_count"
            v-if="!authResult.auth_user_vs_visitor && !authResult.auth_user_vs_school ? false: true"
        />
        <data-view
            :user_filter="visitor_filter"
            :date-list="dateList"
            :number="2"
            :type="true"
            :title="visitorTitle"
            :user-count="visitirList"
            :is-filter="true"
            @change="fnFilterData(4)"
            v-if="authResult.auth_user_vs_visitor"
        />
        <div
            class="container-charts"
            v-if="authResult.auth_user_vs_visitor"
        >
            <data-charts
                :title="data_charts_title.sex_title"
                :user-count="visitirList.sex_count_list"
                :id=" 'visitor_sex' "
                :number="2"
            />
            <data-charts
                :title="data_charts_title.city_title"
                :user-count="visitirList.city_count_list"
                :style="{margin: '0 0 0 10px'}"
                :id=" 'visitor_city' "
                :number="2"
            />
        </div>
        <!-- 访问用户学校 -->
        <div
            class="container-charts"
            style="margin-top:10px"
            v-if="authResult.auth_user_vs_school"
        >
            <div
                class="student-home"
                v-if="true"
                style="padding-bottom: 20px"
            >
                <div class="main-content">
                    <p class="main-content-title">访问用户的学校</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="visitorUser_filter.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(2)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div
                    class="student"
                    style="max-height: 350px"
                >
                    <el-table
                        :data="visitorSchool"
                        max-height="350px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="school_name"
                            label="学校名称"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="count"
                            label="人数"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="percent"
                            label="占比"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.percent }}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 用户生命周期 -->
        <shopHead
            :title="user.cycle_title"
            v-if="authResult.auth_user_live"
        />
        <div
            class="student-home"
            v-if="authResult.auth_user_live"
        >
            <div class="main-content">
                <p class="main-content-title">数据展示</p>
                <div class="main-content-right">
                    <el-date-picker
                        v-model="cycle_filter.date"
                        type="datetime"
                        placeholder="选择日期时间"
                        @change="fnChangeDate(7)"
                        :disabled="cycle_filter.date_slot !== ''"
                        size="small"
                    />
                </div>
            </div>
            <div
                class="main-seat"
                v-if="true"
            />
            <div class="zd-data zd-data-five">
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">新用户</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="最近14天活跃过且首次活跃的用户">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ userCycleList.new_count }}</div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">连续活跃用户</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="最近14天活跃过且最近15 ~ 28天也活跃过的用户">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ userCycleList.still_active_count }}</div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">回流用户</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="最近14天活跃过但最近15 ~ 28天未活跃过的用户">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ userCycleList.back_active_count }}</div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">沉默用户</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="最近14天未活跃过但最近15天~28天活跃过的用户">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ userCycleList.not_active_count }}</div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">流失用户</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="最近28天未活跃过,但是前28~42天活跃过的用户（最近一次活跃是 28 ~ 42 天前）">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ userCycleList.lose_active_count }}</div>
                </div>
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import shopHead from '@/components/shop-head';
import imgPreview from '@/components/common/img-preview';
import dataView from '@/components/student/data-view';
import dataCharts from '@/components/student/data-charts';
import dataVenn from '@/components/student/data-venn';
import { getDate } from '@/assets/js/utils';
export default {
    mixins: [back],
    components: {
        shopHead,
        imgPreview,
        dataView,
        dataCharts,
        dataVenn
    },
    data () {
        return {
            user: {
                user_count: '总用户大盘',
                user_title: ['总注册用户数'],
                new_user_count: '新增用户大盘',
                new_user_title: ['新增用户数'],
                visit_count: '访问用户大盘',
                cycle_title: '用户生命周期'
            },
            visitorTitle: ['APP访问人数','老用户访问人数/新增用户'],
            data_charts_title: {
                sex_title: '性别占比',
                city_title: '学校所在城市',
                phone_title: '手机操作系统占比',
                register_title: '注册方式占比'
            },
            userCycleList: {},//用户生命周期
            cycle_filter: {
                date: this.getDate(0),
                date_slot: ''
            },
            visitorSchool: [],//访问用户学校
            visitorUser_filter: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            visitirList: {},//访问用户大盘数据
            visitor_filter: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            newUserSchool: [],//新增用户学校
            newSchool_filter: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            newUserCount: {},//新增用户大盘
            newUser_filter: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            visitorApp: [],//应用版本人数
            schoolNumber: [],//用户所在学校
            school_filter: {
                date: this.getDate(0),
                date_slot: ''
            },
            userCount: {},//总用户大盘
            //筛选字段
            user_filter: {
                date: this.getDate(0),
                date_slot: ''
            },
            dateList: [{
                value: '',
                label: '时间段'
            },{
                value: '1',
                label: '上周'
            },{
                value: '2',
                label: '本周'
            },{
                value: '3',
                label: '上月'
            },{
                value: '4',
                label: '本月'
            }],
            //权限
            authResult: {}
        };
    },
    filters: {
        isNaN (val) {
            if (isNaN(val)) {
                return 0;
            } else {
                return val;
            }
        }
    },
    computed: {},
    watch: {},
    /**
     * auth_user_count:总用户大盘四个卡片
     * auth_user_school：总用户大盘/用户所在学校
     * auth_user_visitor: 总用户大盘/应用版本人数
     * auth_user_add_count: 新增用户大盘三个卡片
     * auth_user_add_school:新增用户大盘/新增用户学校
     * auth_user_vs_visitor：访问用户大盘三个卡片
     * auth_user_vs_school:访问用户大盘/访问用户学校
     * auth_user_live: 用户生命周期
     */
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '用户数据大盘'}]);
        this.authResult = this.$route.meta.authResult;
        this.init();
        console.log(this.authResult, '列表权限');
    },
    methods: {
        init () {
            this.getVisitorList(this.getDate(0), this.getDate(1));//访问用户大盘
            this.getUserCount(this.getDate(0), this.getDate(1));//总用户大盘
            this.getSChoolNumber(this.getDate(0), this.getDate(1));//用户所在学校
            this.getVisitorApp();//获取应用版本人数
            this.getNewUserCount(this.getDate(0), this.getDate(1));//新增用户大盘
            setTimeout(()=>{
                this.getNewUserSchool(this.getDate(0), this.getDate(1));//新增用户学校
                this.getVisitorSchool(this.getDate(0), this.getDate(1));//访问用户学校
                this.getUserCycle(this.getDate(0), this.getDate(1));//用户生命周期
            },1000);
        },
        /**
         * 选择日期
         * 1:总注册用户/性别占比/学校所在城市/手机操作系统占比
         * 2:用户所在学校
         * 3:新增用户大盘
         * 4:新增用户的学校
         * 5:访问用户大盘
         * 6:访问用户学校
         * 7:用户生命周期
         */
        fnChangeDate (type) {
            const time_stamp = 60 * 60 * 24 * 1000;

            if (type == 1) {
                let temp = this.setDate(new Date(this.user_filter.date).getTime());

                this.getUserCount(temp, temp + time_stamp);
            } else if (type == 2) {
                let temp = this.setDate(new Date(this.school_filter.date).getTime());

                this.getSChoolNumber(temp, temp + time_stamp);
            } else if (type == 7) {
                let temp = this.setDate(new Date(this.cycle_filter.date).getTime());

                this.getUserCycle(temp, temp + time_stamp);
            }
        },

        /**
         * 时间段
         * date_slot: 1_上周 2_本周 3_上月 4_本月
         */
        fnGetDate (type) {
            let temp = this.getMondayTemp(); //本周一时间戳
            let book_temp = this.getMonthtemp(1); //本月一号零点时间戳
            let prev_temp = this.getMonthtemp(0); //上月一号零点时间戳
            let temp_stamp = 60 * 60 * 24 * 1000 * 7;

            if (type == 1) {
                if (this.user_filter.date_slot == '1') {
                    this.getUserCount(temp - temp_stamp, temp);
                } else if (this.user_filter.date_slot == '2') {
                    this.getUserCount(temp, this.getDate(1));
                } else if (this.user_filter.date_slot == '3') {
                    this.getUserCount(prev_temp, book_temp);
                } else if (this.user_filter.date_slot == '4') {
                    this.getUserCount(book_temp, this.getDate(1));
                } else if(this.user_filter.date_slot == '') {
                    this.user_filter.date = this.getDate(0);
                    this.getUserCount(this.getDate(0), this.getDate(1));
                }
            } else if (type == 2) {
                if (this.school_filter.date_slot == '1') {
                    this.getSChoolNumber(temp - temp_stamp, temp);
                } else if (this.school_filter.date_slot == '2') {
                    this.getSChoolNumber(temp, this.getDate(1));
                } else if (this.school_filter.date_slot == '3') {
                    this.getSChoolNumber(prev_temp, book_temp);
                } else if (this.school_filter.date_slot == '4') {
                    this.getSChoolNumber(book_temp, this.getDate(1));
                } else if(this.school_filter.date_slot == '') {
                    this.school_filter.date = this.getDate(0);
                    this.getSChoolNumber(this.getDate(0), this.getDate(1));
                }
            } else if (type == 7) {
                if (this.cycle_filter.date_slot == '1') {
                    this.getUserCycle(temp - temp_stamp, temp);
                } else if (this.cycle_filter.date_slot == '2') {
                    this.getUserCycle(temp, this.getDate(1));
                } else if (this.cycle_filter.date_slot == '3') {
                    this.getUserCycle(prev_temp, book_temp);
                } else if (this.cycle_filter.date_slot == '4') {
                    this.getUserCycle(book_temp, this.getDate(1));
                } else if(this.cycle_filter.date_slot == '') {
                    this.cycle_filter.date = this.getDate(0);
                    this.getUserCycle(this.getDate(0), this.getDate(1));
                }
            }
        },

        /**
         * 数据筛选
         */
        fnFilterData (type) {
            if(type == 1) {//新增用户的学校
                if(this.newSchool_filter.date === null || this.newSchool_filter.date == '' || this.newSchool_filter.date.length < 1) {
                    this.getNewUserSchool(this.getDate(0), this.getDate(1));
                }else {
                    this.getNewUserSchool(getDate(new Date(this.newSchool_filter.date[0])) * 1000, getDate(new Date(this.newSchool_filter.date[1])) * 1000);
                }
            } else if (type == 2) {
                if(this.visitorUser_filter.date === null || this.visitorUser_filter.date == '' || this.visitorUser_filter.date.length < 1) {
                    this.getVisitorSchool(this.getDate(0), this.getDate(1));
                }else {
                    this.getVisitorSchool(getDate(new Date(this.visitorUser_filter.date[0])) * 1000, getDate(new Date(this.visitorUser_filter.date[1])) * 1000);
                }
            } else if (type == 3) {//新增用户大盘
                if(this.newUser_filter.date === null || this.newUser_filter.date == '' || this.newUser_filter.date.length < 1) {
                    this.getNewUserCount(this.getDate(0), this.getDate(1));
                }else {
                    this.getNewUserCount(getDate(new Date(this.newUser_filter.date[0])) * 1000, getDate(new Date(this.newUser_filter.date[1])) * 1000);
                }
            } else if (type == 4) {//访问用户大盘
                if(this.visitor_filter.date === null || this.visitor_filter.date == '' || this.visitor_filter.date.length < 1) {
                    this.getVisitorList(this.getDate(0), this.getDate(1));
                }else {
                    this.getVisitorList(getDate(new Date(this.visitor_filter.date[0])) * 1000, getDate(new Date(this.visitor_filter.date[1])) * 1000);
                }
            }
        },

        /**
         * 总用户数据大盘
         */
        getUserCount (start_time, end_time) {
            this.$post('/student/statistic_student%5Cget_all_student_statistic', {
                // start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    let dataList = {};

                    for(let key in resp.data) {
                        if(key == 'student_count') {
                            dataList.field = [
                                resp.data['student_count']
                            ];
                        }else if (key == 'sex_count_list') {
                            let sexoption = {
                                0: '其它',
                                1: '男',
                                2: '女'
                            };
                            let list = [];

                            resp.data['sex_count_list'].map(item =>{
                                list.push({
                                    name: sexoption[item.sex],
                                    value: item.count
                                });
                            });
                            dataList.sex_count_list = list;
                        } else if (key == 'city_count_list') {
                            let list = [];
                            let sum = 0;

                            resp.data['city_count_list'].map(item =>{
                                list.push({
                                    name: item.city_name,
                                    value: item.count
                                });
                                sum += item.count;
                            });
                            dataList.countNum = sum;
                            dataList.city_count_list = list;
                        } else if (key == 'os_count_list') {
                            let list = [];

                            resp.data['os_count_list'].map(item =>{
                                list.push({
                                    name: item.os_name == '' ? '其它' : item.os_name,
                                    value: item.count
                                });
                            });
                            dataList.os_count_list = list;
                        } else if (key == 'social_stat') {
                            dataList.social_stat = resp.data['social_stat'];
                            dataList.social_stat.student_count = resp.data.student_count;
                        }
                    }

                    this.userCount = dataList;
                    console.log(dataList, 'userCount');
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 用户所在学校
         */
        getSChoolNumber (start_time, end_time) {
            this.$post('/student/statistic_student%5Cget_all_student_school_statistic', {
                // start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.schoolNumber = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 应用版本人数
         */
        getVisitorApp () {
            this.$post('/student/statistic_student%5Cget_all_student_app_version_statistic', {}, resp => {
                if (resp.code == 1) {
                    this.visitorApp = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 新增用户大盘/新增用户数/性别占比/学校所在城市
         */
        getNewUserCount (start_time, end_time) {
            this.$post('/student/statistic_student%5Cget_new_student_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    let dataList = {};

                    for(let key in resp.data) {
                        if(key == 'student_count') {
                            dataList.field = [
                                resp.data['student_count']
                            ];
                        }else if (key == 'sex_count_list') {
                            let sexoption = {
                                0: '其它',
                                1: '男',
                                2: '女'
                            };
                            let list = [];

                            resp.data['sex_count_list'].map(item =>{
                                list.push({
                                    name: sexoption[item.sex],
                                    value: item.count
                                });
                            });
                            dataList.sex_count_list = list;
                        } else if (key == 'city_count_list') {
                            let list = [];

                            resp.data['city_count_list'].map(item =>{
                                list.push({
                                    name: item.city_name,
                                    value: item.count
                                });
                            });
                            dataList.city_count_list = list;
                        }
                    }

                    this.newUserCount = dataList;
                    // console.log(this.newUserCount, 'newUserCount');
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 新增用户学校
         */
        getNewUserSchool (start_time, end_time) {
            this.$post('/student/statistic_student%5Cget_new_student_school_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.newUserSchool = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 访问用户大盘
         */
        getVisitorList (start_time, end_time) {
            this.$post('/student/statistic_student%5Cget_active_student_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    let dataList = {};

                    for(let key in resp.data) {
                        if(key == 'active_count' || key == 'new_count' || key == 'active_old_count') {
                            dataList.field = [
                                resp.data['active_count'],
                                resp.data['new_count'],
                                resp.data['active_old_count']
                            ];
                        }else if (key == 'sex_count_list') {
                            let sexoption = {
                                0: '其它',
                                1: '男',
                                2: '女'
                            };
                            let list = [];

                            resp.data['sex_count_list'].map(item =>{
                                list.push({
                                    name: sexoption[item.sex],
                                    value: item.count
                                });
                            });
                            dataList.sex_count_list = list;
                        } else if (key == 'city_count_list') {
                            let list = [];

                            resp.data['city_count_list'].map(item =>{
                                list.push({
                                    name: item.city_name,
                                    value: item.count
                                });
                            });
                            dataList.city_count_list = list;
                        }
                    }

                    this.visitirList = dataList;
                    // console.log(this.visitirList, 'visitirList');
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 访问用户学校
         */
        getVisitorSchool (start_time, end_time) {
            this.$post('/student/statistic_student%5Cget_active_student_school_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.visitorSchool = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 用户生命周期/无时间段筛选
         */
        getUserCycle (start_time, end_time) {
            this.$post('/student/statistic_student%5Cget_alive_student_statistic', {
                // start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.userCycleList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 日期转换
         */
        setTemp (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth() + 1,
                day = new Date(temp * 1000).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        },

        /**
         * 当天时间戳转当日0点时间戳
         */
        setDate (no) {
            let year = new Date(no).getFullYear(),
                month = new Date(no).getMonth()+1,
                day = new Date(no).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            let date = year + '-' + month + '-' + day + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 获取本周周一零点时间戳
         */
        getMondayTemp () {
            let date = new Date().getDay();
            let temp = null;

            switch (date % 7) {
                case 1:
                    temp = this.getDate(0);
                    break;
                case 2:
                    temp = this.getDate(-1);
                    break;
                case 3:
                    temp = this.getDate(-2);
                    break;
                case 4:
                    temp = this.getDate(-3);
                    break;
                case 5:
                    temp = this.getDate(-4);
                    break;
                case 6:
                    temp = this.getDate(-5);
                    break;
                case 0:
                    temp = this.getDate(-6);
                    break;
                default:
                    break;
            }
            return temp;
        },

        /**
         * 获取本月/上月一号0点时间戳
         * param: 1_本月 0:上月
         */
        getMonthtemp (param) {
            let year = new Date().getFullYear(),
                month = new Date().getMonth() + 1;

            if (param == 0) {
                if (month - 1 == 0) {
                    month = 12;
                    year = year - 1;
                } else {
                    month = month - 1;
                }
            }
            month = month < 10 ? '0' + month : month;

            let date = year + '-' + month + '-01' + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 时间戳转小时
         */
        gethous (temp) {
            let h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        },

        /**
         * 设置表头
         */
        renderHeader(h, {}){
            return h('span', {}, [
                h('span', {}, ''),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        /**
         * 查看图片
         */
        fnShowPreview(images) {
            this.$refs.preview.show([images]);
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #F4F4F4;
        padding: 0 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 学习首页指标 */
    .student {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .student-home {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding: 12px 7px 30px 7px;
        margin-bottom: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
    }
    .student-home-list {
        width: 50%;
    }
    .main {
        width: 100%;
        display: flex;
    }
    .main-flow {
        width: calc(100% / 2);
        padding: 12px 15px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 15px;
        }
    }
    .main-flow-banner {
        width: 100%;
    }
    .main-funnel {
        width: calc((100% - 10px) / 2);
        padding: 12px 15px 30px 15px;
        box-sizing: border-box;
        background: #ffffff;
        margin-left: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 30px;
        }
        .main-funnel-cont {
            padding: 30px 100px 30px 101px;
            display: flex;
            height: 132px;
            align-items: center;
            justify-content: center;
            .main-cont-list {
                display: flex;
                flex-direction: column;
                align-items: center;
                .main-list-title {
                    color: #000000;
                    font-size: 14px;
                    height: 22px;
                    line-height: 22px;
                    margin-bottom: 10px;
                    white-space: nowrap;
                }
                .main-list-cont {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background: #81DFEA;
                    .main-list-ratio {
                        height: 40px;
                        line-height: 40px;
                        color: #ffffff;
                        font-size: 24px;
                        margin-top: 9px;
                        font-weight: 500;
                    }
                    .main-list-number {
                        height: 22px;
                        line-height: 22px;
                        color: #ffffff;
                        font-size: 14px;
                    }
                }
                .blue {
                    background: #81A8EA;
                }
                .green {
                    background: #64B76D;
                }
                .orig {
                    background: #EAAC50;
                }
                .red {
                    background: #FF7470;
                }
            }
            .main-cont-arrow {
                display: flex;
                height: 100%;
                width: 35px;
                justify-content: center;
                .main-arrow-list {
                    display: flex;
                    height: 13px;
                    align-items: center;
                    margin: 48px 6px 0 8px;
                    .main-arrow-line {
                        width: 20px;
                        height: 1px;
                        background: #D8D8D8;
                    }
                    .main-arrow-delta {
                        width: 0px;
                        height: 0px;
                        border-width: 5px;
                        border-style: solid;
                        border-color: transparent transparent transparent #D8D8D8;
                    }
                }
            }
        }
    }
    /* 数据展示 */
    .zd-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        .zd-list {
            width: calc(100% / 4);
            display: flex;
            flex-direction: column;
            align-items: center;
            .zd-head {
                height: 20px;
                display: flex;
                align-items: center;
                .zd-head-title {
                    font-size: 14px;
                    color: #3F454B;
                }
                .el-button {
                    width:10px;
                    border: none !important;
                    margin: -3px 0 0 -15px !important;
                    background: transparent !important;
                }
                .el-button:hover {
                    background: transparent !important;
                }
            }
            .zd-content {
                height: 38px;
                line-height: 38px;
                color: #1D2023;
                font-size: 22px;
                margin-top: 10px;
            }
        }
    }
    .zd-data-card .zd-list {
        width: calc(100% / 2);
    }
    .zd-data-five .zd-list {
        width: calc(100% / 5);
    }
    .zd-data-user .zd-list {
        width: calc(100%);
    }
    /* 数据图表 */
    .el-dialog-echarts .content_left {
        background: #ffffff;
        width: 100%;
        height: 100%;
        .content_head {
            width: 100%;
            height: 55px;
            border-bottom: 1px #E8E8E8 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .content_text {
                font-size: 16px;
                font-weight: bold;
                font-weight: bold;
                padding-left: 24px;
            }
        }
        .content_echarts {
            width: 100%;
            height: 297px;
            // border: 1px red solid;
            box-sizing: border-box;
            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: #20A0FF;
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 总用户大盘 */
    .container-charts {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .userDataAnalysis {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border: none;
        }
        .el-table__header-wrapper {
            border: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-color{
            color: rgba(0, 0, 0);
            font-weight: bold;
        }
        .has-gutter th .cell {
            color: #3F454B !important;
            font-weight: 400 !important;
        }
    }
</style>
